<template>

  <div>

    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
    >
      <template #filter-content style="display: flex; align-items: flex-start">
        <el-input v-model="listQuery.params.title" size="small" style="width:200px" class="filter-item" placeholder="搜索模板ID/名称" clearable />
      </template>

      <template #data-columns>

        <el-table-column
          show-tooltip-when-overflow
          label="模板ID"
          align="center"
          prop="id"/>

        <el-table-column
          show-tooltip-when-overflow
          label="模板名称"
          align="center"
          prop="title">

          <template v-slot="scope">
            <detail-link
              :id="scope.row.id"
              :title="scope.row.title"
              permission="notify:tmpl:update"
              @click="handleUpdate" />
          </template>

        </el-table-column>

        <el-table-column
          label="模板内容"
          show-tooltip-when-overflow
          align="center"
          prop="template"
        />

        <el-table-column
          label="站内信"
          width="120px"
          align="center">

          <template v-slot="scope">
            <i v-if="scope.row.imOn" class="el-icon-success on"/>
            <i v-else class="el-icon-error off"/>
          </template>

        </el-table-column>

        <el-table-column
          label="手机短信"
          width="120px"
          align="center">

          <template v-slot="scope">
            <i v-if="scope.row.smsOn" class="el-icon-success on"/>
            <i v-else class="el-icon-error off"/>
          </template>

        </el-table-column>

        <!--        <el-table-column-->
        <!--          label="社交媒体"-->
        <!--          width="120px"-->
        <!--          align="center">-->

        <!--          <template v-slot="scope">-->
        <!--            <i v-if="scope.row.socialOn" class="el-icon-success on"></i>-->
        <!--            <i v-else class="el-icon-error off"></i>-->
        <!--          </template>-->

        <!--        </el-table-column>-->

        <el-table-column
          label="电子邮件"
          width="120px"
          align="center">

          <template v-slot="scope">
            <i v-if="scope.row.emailOn" class="el-icon-success on"/>
            <i v-else class="el-icon-error off"/>
          </template>

        </el-table-column>

        <el-table-column
          label="操作"
          width="180px"
          align="center">

          <template v-slot="scope">
            <el-link type="primary" icon="el-icon-setting" @click="testSend(scope.row.id)">测试</el-link>
          </template>

        </el-table-column>

      </template>

    </data-table>

    <el-dialog
      :close-on-click-modal="false"
      :append-to-body="true"
      :visible.sync="dialogVisible"
      title="编辑模板"
      width="60%"
    >

      <el-form ref="dataForm" :model="formData" :rules="rules" label-position="left" label-width="100px">

        <el-alert
          style="margin-bottom: 20px"
          title="如开关无法开启，则表示此模板不适应于该场景"
          type="warning"/>

        <el-form-item label="模板名称" prop="title">
          <el-input v-model="formData.title" size="small" />
        </el-form-item>

        <el-form-item label="模板内容" prop="template">
          <el-input v-model="formData.template" size="small" />
        </el-form-item>

        <el-row :gutter="20" type="flex" style="flex-wrap:wrap; flex-direction: row">
          <el-col :span="24">
            <el-form-item label="站内信开关">
              <el-switch v-model="formData.imOn" :disabled="!formData.imEnable"/>
            </el-form-item>
          </el-col>

          <!--              <el-col :span="12">-->
          <!--                <el-form-item label="社交媒体开关">-->
          <!--                  <el-switch v-model="formData.socialOn" :disabled="!formData.socialEnable"/>-->
          <!--                </el-form-item>-->
          <!--              </el-col>-->

          <el-col :span="12">
            <el-form-item label="手机短信开关">
              <el-switch v-model="formData.smsOn" :disabled="!formData.smsEnable"/>
            </el-form-item>
          </el-col>

          <el-col v-if="formData.smsOn" :span="12">
            <el-form-item label="短信模板">
              <el-input v-model="formData.smsTmpl" size="small"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="电子邮件开关">
              <el-switch v-model="formData.emailOn" :disabled="!formData.emailEnable"/>
            </el-form-item>
          </el-col>

          <el-col v-if="formData.emailOn" :span="12">
            <el-form-item label="邮件模板">
              <el-input v-model="formData.emailTmpl" size="small"/>
            </el-form-item>
          </el-col>

        </el-row>

        <h3>模板参数</h3>

        <el-table
          :data="formData.props"
          border
          stripe
          style="width: 100%">
          <el-table-column
            prop="prop"
            label="参数名称"/>
          <el-table-column
            prop="remark"
            label="参数描述"/>
        </el-table>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button :loading="loading" type="primary" @click="handleSave">确 定</el-button>
      </div>

    </el-dialog>

    <test-msg-dialog :dialog-show.sync="sendVisible" :tmpl-id="tmplId"/>

  </div>

</template>

<script>

import { fetchDetail, saveData } from '@/api/notify/tmpl'
import TestMsgDialog from '@/views/admin/notify/components/TestMsgDialog'

export default {
  components: { TestMsgDialog },
  data() {
    return {

      loading: false,
      dialogVisible: false,
      listQuery: {
        current: 1,
        size: 10,
        params: {
          dateRange: []
        }
      },

      options: {
        // 可批量操作
        multi: false,
        // 列表请求URL
        listUrl: '/api/notify/tmpl/paging'
      },

      formData: {

      },

      rules: {
        title: [
          { required: true, message: '模板名称不能为空！' }
        ],
        template: [
          { required: true, message: '模板内容不能为空！' }
        ]
      },

      sendVisible: false,
      tmplId: ''

    }
  },

  created() {

  },
  methods: {

    // 保存模板
    handleSave() {
      this.$refs.dataForm.validate((valid) => {
        if (!valid) {
          return
        }
        this.loading = true
        saveData(this.formData).then(() => {
          this.$message({
            type: 'success',
            message: '模板保存成功!'
          })
          this.dialogVisible = false
          this.$refs.pagingTable.getList()
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      })
    },

    // 查找详情
    handleUpdate(id) {
      fetchDetail(id).then(res => {
        this.dialogVisible = true
        this.formData = res.data
      })
    },

    // 测试发送
    testSend(id) {
      this.tmplId = id
      this.sendVisible = true
    }
  }
}
</script>

<style scoped>

.on{
  color: #0A84FF; font-size: 18px
}

.off{
  color: #ddd; font-size: 18px
}
</style>
